<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GUI</title>

    <link rel="stylesheet" href="../static/css/atom.css">
    <script type="importmap">
    {
        "imports": {
            "three": "../three/v170/three.module.min.js",
            "GLTFLoader":"../three/v170/GLTFLoader.js",
            "DragControls":"../three/v170/DragControls.js",
            "CSS2DRenderer":"../three/v170/CSS2DRenderer.js",
            "OrbitControls":"../three/v170/OrbitControls.js",
            "lil-gui": "../three/v170/lil-gui.module.min.js"
        }
    }
    </script>
</head>

<body>
    <!-- 参考案例：  https://juejin.cn/post/7389950978243936297 -->
    <div id="app"></div>


    <script type="module">
        import * as THREE from 'three';
        import { GUI } from 'lil-gui';
        import { OrbitControls } from "OrbitControls";

        console.log(`gltf1.html 33 [THREE版本]`, THREE.REVISION);

        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

        camera.lookAt(0, 0, 0)
        camera.position.set(2, 4, 6)
        //camera.position.set(20,140,-140);

        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.shadowMap.enabled = true

        document.body.appendChild(renderer.domElement);

        const orbitControls = new OrbitControls(camera, renderer.domElement);
        orbitControls.update()

        //添加一个球
        const sphereGe = new THREE.SphereGeometry(0.5)
        const sphereMa = new THREE.MeshStandardMaterial({
            color: '#ff0000',
        })
        const sphereMesh = new THREE.Mesh(sphereGe, sphereMa)
        sphereMesh.position.y = 1
        scene.add(sphereMesh)
        sphereMesh.castShadow = true

        //添加一个平面
        const planeGe = new THREE.PlaneGeometry(2, 3)
        const planeMa = new THREE.MeshPhongMaterial({
            color: 0xff0F8f,
        })
        const planeMesh = new THREE.Mesh(planeGe, planeMa)
        planeMesh.rotation.x = -0.5 * Math.PI
        planeMesh.receiveShadow = true
        scene.add(planeMesh)

        //添加一个聚光灯
        const light = new THREE.SpotLight(0xffffff, 20)
        light.position.set(2, 3, 2)
        light.angle = 65 / 180 * Math.PI
        scene.add(light)
        light.castShadow = true
        scene.add(new THREE.AmbientLight(0xffffff, 0.2))

        // 创建 GUI，设置gui面板的标题
        const gui = new GUI({ 'title': "操作区" });
        const obj = {
            color: '#ff0000',
            speed: 2.5,
            isVisible: true,
            selectedOptions: ['苹果🍎']
        };

        gui.addColor(obj, 'color').onChange((value) => {
            sphereMa.color.set(value);
        });

        gui.add(obj, 'isVisible').onChange((value) => {
            if (value) scene.add(planeMesh)
            else scene.remove(planeMesh)
        });

        gui.add(obj, 'speed', 0, 10, 0.2)

        const folder = gui.addFolder('下拉选择');
        const availableOptions = ['苹果🍎', '香蕉🍌', '橘子🍊', '蓝莓🫐'];
        const controller = folder.add(obj, 'selectedOptions', availableOptions).name('选项');
        controller.onChange((value) => {
            alert('选择的是:' + value);
        });

        //创建文件夹，区分sphere的操作区、camera操作区、light操作区
        const sphereFol = gui.addFolder('球')
        sphereFol.add(sphereMesh.position, 'x', -5, 5, 0.1)
        sphereFol.add(sphereMesh.position, 'y', -5, 5, 0.1)
        sphereFol.add(sphereMesh.position, 'z', -5, 5, 0.1)

        const cameraFol = gui.addFolder('相机')
        cameraFol.add(camera.position, 'x', -5, 8, 0.1)
        cameraFol.add(camera.position, 'y', -5, 8, 0.1)
        cameraFol.add(camera.position, 'z', -5, 8, 0.1)

        const lightFol = gui.addFolder('灯光')
        lightFol.add(light.position, 'x', -5, 5, 0.1)
        lightFol.add(light.position, 'y', -5, 5, 0.1)
        lightFol.add(light.position, 'z', -5, 5, 0.1)
        //灯光选项默认折叠
        lightFol.close()

        const clock = new THREE.Clock()
        animate();
        function animate() {
            const time = clock.getElapsedTime()
            //小球运动
            sphereMesh.position.x = Math.sin(time * obj.speed) * 2
            sphereMesh.position.y = Math.cos(time * obj.speed) * 2
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
            orbitControls.update()
        }
        //resize
        window.addEventListener('resize', () => {
            //Camera
            camera.aspect = window.innerWidth / window.innerHeight
            camera.updateProjectionMatrix()
            //Renderer
            renderer.setSize(window.innerWidth, window.innerHeight);
        })
    </script>
</body>
</htm>